<template>
<!--成本构成-->
  <div>
    <div id="costStructureChart" style="width:80%;height:215px; "></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "costComposition",
  data(){
    return {
      costStructureChart: null,
    }
  },
  props: {
    activeName: {
      type: String,
      default: '1'
    }
  },
  watch: {
    activeName() {
      this.$nextTick(() => {
        this.costStructureChart.resize();
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChartThree()
    })
  },
  methods:{
    initChartThree(){
      let list = [
        {value: 1.1, name: '人工成本'},
        {value: 2, name: '商务费用'},
        {value: 2.2, name: '差旅费用'},
      ]
      this.costStructureChart = echarts.init(document.getElementById('costStructureChart'))
      this.costStructureChart.setOption({
        title: [
          {
            text: `{name|${'成本总额'}}\n{value|${3.20}万}`,
            left: 'center',
            bottom: '36%',
            textStyle: {
              rich: {
                value: {
                  fontSize: '25',
                  fontWeight: '900',
                  color: '#000',
                  padding: [8, 0]
                },
                name: {
                  fontSize: '10',
                  color: '#000'
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical', // 垂直排列
          x: 'right', // 图例放置在右边
          top: '30%',
          right: '20%',
          align: 'left',
          itemHeight: 14,
          itemWidth: 14,
          icon: 'rect',
        },
        color: ['#13c2c2','#66E1DF','#66E193'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'], // 设置内外半径，实现环形效果
            label: {
              fontSize: 11,
              formatter: '{b}\n{d}%',
            },
            labelLine: {
              show: true,
              length: 20, // 引导线的长度
              length2: 30, // 引导线的第二段的长度
              smooth: 0.2, // 引导线平滑度
            },
            data: list
          }
        ]
      });
      window.addEventListener('resize',()=>{
        this.costStructureChart.resize()
      })
    }
  }
}
</script>

<style scoped>

</style>
